

Nessa etapa eu criei o atributo width para regular a largura das colunas.
Vou procurar também esclarecer alguns pontos do código javascript.

P. Como vou definir a largura das colunas ?
R. Vou mandar esse dado através do harbour via JSON. 

P. Por que é necessário fixar a largura das colunas ?
R. Quando passava de uma página para outra a largura das colunas estava variando ligeiramente. 
Faça um teste com os exemplos anteriores para comprovar. 

Portanto, vou corrigir esse pequeno problema e ao mesmo tempo rever alguns pontos do javascript um detalhe maior, apesar
desse não ser o foco do estudo.

O objetivo principal, portanto, é criar uma propriedade width lá no modHarbour (dados.prg) e enviar junto com os outros dados.

Em dados.prg ficou assim :
[code]

    // Head
    AADD( aHead , "Código" );AADD( aWidth , "20%" ) // <--- aWidth armazena string com largura relativa
    AADD( aHead , "Nome" );AADD( aWidth , "70%" ) // <---- Não vai somar 100% por causa dos botões que vão ocupar espaço, é bom deixar uma sobra.

[/code]

O JSON do modHarbour agora ficou assim :
[code]
{"Result":"OK", <--------- Deu certo! Não estou tratando outros casos, mas deixo aqui para posterior mudança.
 "NextPage":true, <------- Tem próxima página ? (para habilitar/desabilitar) botões 
 "PreviousPage":false, <-- Tem página anterior ?
 "Header":["Código","Nome",""], <---- O cabeçalho (tem um extra vazio para a coluna dos botões de alteração)
 "Width":["20%","70%"], <------------ O tamanho das colunas (a alteração dessa aula)
 "Rows":[{"___pk":7566,"id":7566,"nome":"JONES"}, <---- Os dados + valor da chave primária (___pk)
         {"___pk":7654,"id":7654,"nome":"MARTIN"},<---+
		 {"___pk":7698,"id":7698,"nome":"BLAKE"}] <---+
}
[/code]

Agora vamos parte onde recebo os dados :
No navegador eu recebo esses dados juntamente com as definições do grid. Nada vai mudar, apenas vou referenciar o que fiz em dados.prg no javascript.

Vou repetir o que já coloquei em tópicos anteriores. São pequenas observações sobre o código javascript: 
1. O JQuery/Javascript tem funções que recebem automaticamente tudo o que mando pelo modHarbour sem precisar converter nada. O padrão JSON garante isso.
2. Esse recebimento é feito por $.ajax
3. Essa "função de usuário" (lembre-se da DBEDIT) recebe um parâmetro data (ou o nome que eu quiser). Ela será chamada somente se o navegador conseguir acessar a sua página --> success: function( data )
4. Esse parâmetro data [ em  function( data ) ] é um hash javascript com o conteúdo do json que eu enviei do harbour.

Você pode achar estranho a notação function( data ), mas é porque o Javascript aceita funções sem nome.
Pense nelas como blocos de código extendidos.

Nesse trecho abaixo eu uso data.Width para preencher a propriedade width de cada coluna (td) da minha tabela.

[code]
for ( let elem in val ){
		if (elem != "___pk")
			row += '<td width="'+ data.Width[++ord] +'">' + val[elem] + '</td>';
	}
[/code]

O contexto do trecho acima é a função $.ajax, que fica no método RefreshGrid, em brw.js :
Vou reproduzir o contexto abaixo e comentar alguns trechos.

[code]
   RefreshGrid( nSkip = 0 ){  <--- Atualização do grid (ele é chamado a cada passada de página. 
      
      $("#page").text( parseInt( $("#page").text() )  + nSkip);     <---- Atualizo o número da página para o usuário
	  $("#registros thead").empty();  <---- Limpo os cabeçalhos  
      $("#registros tbody").empty();  <---- Limpo os dados (agora a tabela ficou vazia  (a partir da linha de baixo vou começar a preencher de novo)
      $.ajax({ <---------------------------- Começo a consulta ao modHarbour
              type: 'GET',  <--------------- Método que vou usar. 
			                                 O modHarbour vai receber os dados através do GET (não do POST)
											 
              url: "dados.prg", <----------- Os script modHarbour que vai receber os dados e retornar o resultado
			  
              data: { <--------------------- Aqui é o que estou mandando
                     pagina: $("#page").text() <----- Só estou mandando um parâmetro (a página)
               },
              async: false,  
              dataType: 'json',
              success: function( data ){  <- Minha "função de usuário" ( data é o JSON de retorno com o que o modHarbour vai me retornar, aqui ele já "virou" hash javascript)
				    let head = ""; 
					let row;
					let ord;
				  
                    $("#anterior").attr("disabled", !data.PreviousPage ); 
                    $("#proximo").attr("disabled", !data.NextPage );
					switch ( data.Result ){ 
                     case 'OK':   
					    console.log( data ); <-------- Aqui é o meu "depurador" / Equivale ao alert para ver o conteúdo de uma variável que vc tem dúvida
					    head += '<tr>';
						for ( let elem of data.Header ){
							head += '<th>' + elem + '</th>';
					    }
						head += '</tr>';
						$( head ).appendTo("#registros thead");

                        for ( let val of data.Rows ){
							if ( typeof val.___pk != "undefined" ) <----- Se tiver chave primária eu preciso guardar ela 
								row = '<tr ___pk=' + val.___pk + '>';
							else
								row = '<tr>'; <-------------------- Como não veio chave primária não guardo
							ord = -1 <-------------- Posso fazer melhor do que isso :-)
							console.log( data.Width );  <-------- Meu "depurador" de novo 
							for ( let elem in val ){
								if (elem != "___pk")
									row += '<td width="'+ data.Width[++ord] +'">' + val[elem] + '</td>';
							}
							row += "</tr>";
							console.log( row ); <------- A linha que estou retornando. (Mais depuração / Não esqueça de apagar depois
							$( row ).appendTo("#registros tbody"); <--------- Finalmente adiciono as linhas ao tbody do grid #registros (esse nome não era para estar fixo aqui dentro da minha função)
						}	
						
                        
                        break;
                  }   
              }  
      }); // ajax
  }
[/code]

Pare quem nunca viu, o console.log() é uma função especial do Javascript só para servir de depuração. 
Pense naqueles avisos ? e ?? que a gente bota dentro do código quando tem alguma dúvida.

Para ver o conteúdo de console.log você precisa ativar o console do seu navegador. No Chrome basta clicar Ctrl+Shift+I e selecionar a aba Console.

Entendo o desconforto de quem nunca viu esses códigos. Mas analisando o arquivo brw.js e index.html dá para ter uma noção melhor. 

* VOLTANDO AO ASSUNTO DA LARGURA

Essas larguras são das colunas. A função dela é evitar que elas mudem de tamanho ligeiramente
a cada passada de página. 

A largura das colunas é uma coisa, a largura do GRID é outra. A largura do GRID só vai variar se o usuário redimensionar a janela, se acessar
o sistema de um smartphone, tablet, etc. 

Em resumo: A largura total do GRID é para permanecer a mesma quando houver uma mudança na página dos registros (botão next/previous). 

A princípio você não precisa mecher na largura do GRID, mas se precisar alterar, faça nesse trecho do HTML :

[code]
    <div class="row">
	  <div class="col-md-12">   <-------------- altere 12 para outro valor inferior (12 é o máximo)
		  <table id="registros" class="table table-striped">
				  <thead></thead>
				  <!-- Dados -->
				  <tbody>
				  </tbody>
				  <!-- Dados -->
		  </table>
	  </div>	  
   </div>
[/code]

Sei que para quem tem pouca experiência é difícil, mas nesse caso da largura do GRID, tudo
o que você tem a fazer é mudar "col-md-12" para "col-md-10", por exemplo.
Você pode ter vários col dentro de um row, mas a soma dos col não pode passar de 12.

Exemplos :

[code]
<div class="row"> <!-- 4 + 8 = 12 -->
    <div class="col-md-4"> </div>
    <div class="col-md-8"> </div> 
</div>
<div class="row"> <!-- 3 + 6 + 3 = 12 -->
    <div class="col-md-3"> </div>
    <div class="col-md-6"> </div>
    <div class="col-md-3"> </div>
</div>
<div class="row"> <!-- 10 + 2 = 12 -->
    <div class="col-md-10"> </div>
    <div class="col-md-2"> </div>
</div>
[/code]

Esse número 12 é uma espécie de largura relativa. Como o sistema vai ter que se adaptar a qualquer tela, eu não posso trabalhar com números absolutos.

Quem quiser saber mais, pesquisa "sistema de grids bootstrap". 

O valor máximo é 12, você pode ir diminuindo e dando refresh no navegador (Ctrl+F5).

Nota: O refresh real de um navegador é Ctrl+F5, não somente F5. Ctrl+F5 força a leitura total e não usa o que ficou armazenado no cache do navegador.

Espero não ter complicado mais do que ajudado. Não espere entender tudo de primeira.